<template>
  <div class="line_chart" id="line_chart"></div>
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
  props: {
    xData: {
      type: Array,
      required: true
    },
    yData: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    type EChartsOption = echarts.EChartsOption
    let option: EChartsOption  
    option = {}
    var myChart: echarts.ECharts
    const init = () => {
      if(myChart) {
        myChart.dispose()
      }
      option = {
        xAxis: {
          type: 'category',
          data: props.xData as Array<string>,
          axisTick: {
            show: false
          },
          axisLine: {
            // 数值有负数时，让x轴始终在最底部
            onZero: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        series: [
          {
            data: props.yData as Array<number>,
            type: 'line',
            symbol: 'none',
            smooth: true
          }
        ]
      };
      myChart = echarts.init(document.getElementById('line_chart') as HTMLElement)
      option && myChart.setOption(option);
    }
    onMounted(() => {
      init()
    })
    return {
      init
    }
  }
})
</script>

<style scoped>
  .line_chart {
    height: 100%;
    width: 100%;
  }
</style>